<template>
    <Group :showContent="true" label="Margin" ref="GroupView">
        <a-select v-model:value="SelectValue" style="width: 100%" placeholder="默认">
            <a-select-option v-for="item in marginOptions" :value="item.value" :key="item.value">
                {{ item.label }}
            </a-select-option>
        </a-select>
        <template #Content>
            <borderBox></borderBox>
        </template>
    </Group>
</template>
<script setup>
import { ref, watch } from 'vue'
import Group from '../Base/Group.vue'
import borderBox from '../Base/borderBox.vue';
const GroupView = ref();

const props = defineProps(['StyleValue']);

const marginValue = ref({
    top: '',
    left: '',
    bottom: '',
    right: '',
});

const MarginValue = ref();
const SelectValue = ref();
const CustomValue = ref();

watch(SelectValue, val => {
    if (val == 'custom') {
        GroupView.value.SetState(true);
        MarginValue.value = CustomValue.value;
    } else {
        GroupView.value.SetState(false);
        MarginValue.value = SelectValue.value;
    }
})

const marginOptions = ref([
    { label: '超大(24px)', value: '24px' },
    { label: '大(16px)', value: '16px' },
    { label: '中(12px)', value: '12px' },
    { label: '小(8px)', value: '8px' },
    { label: '超小(4px)', value: '4px' },
    { label: '无(0px)', value: '0px' },
    { label: '自定义', value: 'custom' },
]);





</script>
<style lang="less" scoped></style>